"use client";
import {
  commentPost,
  delPostComment,
  getPostComment,
  getUserById,
  getVideoById,
  replyPost,
} from "@/api";
import ContentView from "@/components/ContentView/page";
import { useSearchParams } from "next/navigation";
import React, { useEffect, useRef, useState } from "react";
import { TCourses, TVideoData } from "../Course/page";
import { message } from "antd";
import CourseList from "@/components/CourseList";
import style from "./index.module.scss";
interface IVedioContentView {}
interface IReplyOption {
  rootId?: number;
  rvId?: number;
  videoId?: number;
}
export type TUserInfo = {
  userName: string;
  userHead: string;
};
const VedioContentView: React.FC<IVedioContentView> = () => {
  const [review, setReview] = useState("");
  const [vedioData, setVedioData] = useState<TVideoData>();
  const videoId = useSearchParams().get("videoId");
  const searchParams = useSearchParams();
  const [reviewList, setReviewList] = useState<[]>([]);
  const [replyOption, setReplyOption] = useState<IReplyOption>({});
  const [userInfo, setUserInfo] = useState<TUserInfo>({
    userHead: "",
    userName: "",
  });
  const textareaRef = useRef<any>(null);
  const textRef = useRef<any>(null);
  const [courseUrl, setCourseUrl] = useState("");
  // const [authorId, setAuthorId] = useState(0);
  //课程描述
  const [courseDesc, setCourseDesc] = useState<string>();
  const getTheVideo = async () => {
    const res: any = await getVideoById({ subjectId: videoId });
    if (res.data.code === 409) {
      message.error(res.data.msg);
    } else {
      await getUserDetail(res.data.data?.userId);
      setVedioData({ ...res.data.data, authorId: res.data.data.userId });
      // setCourseDesc(vedioData?.videoList[0].richText);
    }
  };
  // 获取用户信息
  const getUserDetail = async (id: number) => {
    const res = await getUserById({ id });
    setUserInfo({
      ...userInfo,
      userHead: res.data.data.userHead,
      userName: res.data.data.userName,
    });
  };
  const getPostReview = async () => {
    const res = await getPostComment({
      videoId: searchParams.get("videoId"),
      category: 1,
    });
    setReviewList(res.data.data);
  };

  //发布评论
  const handlePublish = async () => {
    if (replyOption.rootId) {
      replyComment();
    } else {
      const res = await commentPost({
        content: review,
        videoId: searchParams.get("videoId")?.toString(),
        category: 1,
      });
      if (res.data.code === 200) {
        setReview("");
        getPostReview();
        message.success("评论成功");
      } else {
        message.error(res.data.msg);
      }
    }
  };
  //回复请求
  const replyComment = async () => {
    const res = await replyPost({
      content: review,
      videoId: replyOption.videoId,
      rootId: replyOption.rootId,
      replyUserId: replyOption.rvId,
      category: 1,
    });
    if (res.data.code === 200) {
      setReview("");
      setReplyOption({});
      getPostReview();
      message.success("回复成功");
    } else {
      message.error(res.data.msg);
    }
  };
  const handleReply = (rootId: number, rvId: number, videoId: number) => {
    console.log(rootId, "rootId", "------", rvId, "rvId", videoId, "postId");
    setReplyOption({ rootId, rvId, videoId });
    textareaRef.current.focus();
    textRef.current.scrollIntoView({ behavior: "smooth" });
  };
  const handleDel = async (commentId: number) => {
    const res = await delPostComment({ commentId });
    if (res.data.code === 200) {
      getPostReview();
      message.success("删除成功");
    } else {
      message.error(res.data.data.msg);
    }
  };
  const lookCourse = (value: TCourses) => {
    setCourseUrl(value.videoLink);
    setCourseDesc(value.richText);
  };
  useEffect(() => {
    getTheVideo();
    getPostReview();
  }, []);

  return (
    <div className={style["wrapper"]}>
      <ContentView
        reviewList={reviewList}
        handleReply={handleReply}
        review={review}
        setReview={setReview}
        vedioData={vedioData}
        onPublish={handlePublish}
        handleDel={handleDel}
        textareaRef={textareaRef}
        textRef={textRef}
        userInfo={userInfo}
        courseUrl={courseUrl}
        courseDesc={courseDesc}
      ></ContentView>
      <CourseList
        coursesData={vedioData?.videoList}
        lookCourse={lookCourse}
        wrapperClassName={style["courseListWrapper"]}
      ></CourseList>
    </div>
  );
};
export default VedioContentView;
